<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>面向对象-事件捕捉模型与冒泡模型</title>
    <!--<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>-->
</head>
<style>
    #china{width: 600px;height: 600px;border: 1px solid gray;padding: 20px}
    #guangdong,#shenzhen{width: 80%;height: 80%;}
    #guangdong{border:  1px solid blue;padding: 20px;}
    #shenzhen{border:  1px solid red;padding: 20px;}
</style>
<script>

window.onload = function(){

    function $(id){
        return document.getElementById(id);
    }

//    捕捉模型
    $("china").addEventListener('click',function(){
        alert("进入china ")
    },true)


    $("guangdong").addEventListener('click',function(){
        alert("进入guangdong ")
    },true)


    $("shenzhen").addEventListener('click',function(){
        alert("进入shenzhen ")
    },true)

//    冒泡模型
//    $("china").addEventListener('click',function(){
//        alert("离开china ")
//    },false)
//
//
//    $("guangdong").addEventListener('click',function(){
//        alert("离开guangdong ")
//    },false)
//
//
//    $("shenzhen").addEventListener('click',function(){
//        alert("离开shenzhen ")
//    },false)
}


</script>
<body>
    <div id="china">china
        <div id="guangdong">guangdong
            <div id="shenzhen">shenzhen</div>
        </div>
    </div>
</body>
</html>

